<template>
    <header id="header">
        <div class="left">
            <Icon class="icon" name="wap-nav" @click="updateShowAside" />
            <span>{{title}}</span>
        </div>
        <div class="right">
            <router-link to="/city">
                <span class="city">{{ city }} 
            <img src="../assets/img/arrow-down.png" /></span>
            </router-link>
            <Icon name="contact" class="icon" @click="toMy" />
        </div>
    </header>
</template>

<script>
    import {
        Icon
    } from 'vant'
    import {
        mapGetters,
        mapActions
    } from 'vuex'
    export default {
        data() {
            return {}
        },

        components: {
            Icon
        },
        computed: {
            ...mapGetters(['title', 'city','isLogin'])
        },
        created() {
            this.getCity();
        },
        methods: {
            ...mapActions(['updateShowAside']),
            // 获取所在地城市名称,使用百度地图的api
            getCity() {
                var myCity = new BMap.LocalCity();
                myCity.get((res) => {
                	// 获取到城市名称之后,存入store
                    this.$store.commit('updateCity', res.name)
                });
            },
            // 跳转到我的个人中心
            toMy() {
                if (this.isLogin) {
                    this.$router.push('/account/my');
                } else {
                	// 若没登录,需要先登录
                    this.$router.push('/account/login');
                }
            }
        }
    }

</script>

<style scoped lang="less">
    #header {
        position: fixed;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 50px;
        background: #282828;
        align-items: center;
        color: #fff;
        z-index: 9999;
    }

    .icon {
        width: 48px;
        text-align: center;
        color: #999;
        border-right: 1px solid #222;
        box-shadow: 1px 0 1px #363636;
    }

    .left {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
            color: #fff;
            padding: 0 14px;
        }
    }

    .right {
        .city {
            padding: 0 6px;
            color: #999;

            img {
                width: 16px;
                height: 16px;
                vertical-align: -3px;
            }
        }
    }

</style>
